<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/search.css" />
		<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script src="/js/underscore-noflect.js"></script>
	</head>

	<body>
    <% include header.ejs%>
	<div class="search-content">
			<div class="message-area">
				<ol class="breadcrumb">
					<li>
						<a href="#">当前位置：</a>
					</li>
					<li>
						<a href="/">主页</a>
					</li>
					<li className="active">资料管理
					</li>
				</ol>
			</div>
			<div class="history-task-record">
				<p class="title">相关资料:</p>
				<table class="table table-hover" id="tableAll">
					<tr>
						<th>资料编号</th>
						<th>资料标题</th>
						<th>资料形式</th>
						<th>上传时间</th>
						<th>截止日期</th>
						<th>下载人数</th>
						<th>所属类别</th>
						<th>操作</th>
					</tr>
				</table>
				<nav aria-label="...">
					<ul class="pagination">
						<li class="disabled">
							<a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
						</li>
						<li class="active">
							<a href="#">1 <span class="sr-only">(current)</span></a>
						</li>
						<li class="disabled">
							<a href="#" >2 <span class="sr-only">(current)</span></a>
						</li>
						<li class="disabled">
							<a href="#">3<span class="sr-only">(current)</span></a>
						</li>
						<li class="disabled">
							<a href="#">4 <span class="sr-only">(current)</span></a>
						</li>
						<li class="disabled">
							<a href="#">5<span class="sr-only">(current)</span></a>
						</li>
						<li class="disabled">
							<a href="#" aria-label="Next">
								<span aria-hidden="true">&raquo;</span>
							</a>
						</li>
					</ul>
				</nav>
			</div>
		
			<hr class="divider task-divider" />
			<div class="container summary">
				<footer>
					<p class="pull-right">
						<a href="#top">回到顶部</a>
					</p>
					<p class="pull-left">&copy; 学生档案管理系统</p>
				</footer>
			</div>
	</div>
	<!--前端模板-->
	<script type="text/template" id="resourceTable">
			<tr>
				<td>{{=dataNum}}</td>
				<td>{{=dataTitle}}</td>
				<td>{{=dataForm}}</td>
				<td>{{=upDate}}</td>
				<td>{{=endDate}}</td>
				<td>{{=downloadNum}}</td>
				<td>{{=category}}</td>
				<td>
					<a href="{{=optionPath}}">{{=option}}</a>
				</td>
			</tr>
	</script>

	<script type="text/javascript">
		var $tableAll=$("#tableAll");
		//得到模板函数
		var compiled=_.template($("#resourceTable").html());

		//ajax服务，获取信息
		$.ajax({
			"url":"/showRefresh",
			"type":"get",
			"success":function (result) {
                //result是一个数组
//                console.log(Array.isArray(result));
//				console.log(result);
                iterator(0);
                //迭代器
				//这里防止ajax异步，必须使用迭代器
                function iterator(i) {
                    if (i == result.length) {
                        //在这里书写请求完毕之后做的事情
                        return;  //不用继续迭代了
                    }
                    console.log(result[i]);
					//组装模板
					var htmlstring = compiled(result[i]);
					//添加DOM
					$("#tableAll").append($(htmlstring));
					iterator(i + 1);
                }
            }
		})
	</script>
	</body>

</html>